<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Radio 单选框</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法。</p>
	<a-space>
		<a-radio-group v-model:value="value1_1">
			<a-radio value="1">男</a-radio>
			<a-radio value="2">女</a-radio>
		</a-radio-group>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">按钮样式</a-divider><!-- =============================================================== -->
	<p class="desc">按钮样式的单选组合。</p>
	<a-space direction="vertical">
		<a-radio-group v-model:value="value2_1">
			<a-radio-button value="a">Hangzhou</a-radio-button>
			<a-radio-button value="b">Shanghai</a-radio-button>
			<a-radio-button value="c">Beijing</a-radio-button>
			<a-radio-button value="d">Chengdu</a-radio-button>
		</a-radio-group>
		<a-radio-group v-model:value="value2_2">
			<a-radio-button value="a">Hangzhou</a-radio-button>
			<a-radio-button value="b" disabled>Shanghai</a-radio-button>
			<a-radio-button value="c">Beijing</a-radio-button>
			<a-radio-button value="d">Chengdu</a-radio-button>
		</a-radio-group>
		<a-radio-group v-model:value="value2_3" disabled>
			<a-radio-button value="a">Hangzhou</a-radio-button>
			<a-radio-button value="b">Shanghai</a-radio-button>
			<a-radio-button value="c">Beijing</a-radio-button>
			<a-radio-button value="d">Chengdu</a-radio-button>
		</a-radio-group>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">RadioGroup 垂直</a-divider><!-- =============================================================== -->
	<p class="desc">垂直的 RadioGroup，配合更多输入框选项。</p>
	<a-space>
		<a-radio-group v-model:value="value3_1">
			<a-radio :style="radioStyle3" :value="1">Option A</a-radio>
			<a-radio :style="radioStyle3" :value="2">Option B</a-radio>
			<a-radio :style="radioStyle3" :value="3">Option C</a-radio>
			<a-radio :style="radioStyle3" :value="4">
				More...
				<a-input v-if="value3_1 === 4" v-model:value="value3_2" style="width: 100px; margin-left: 10px"></a-input>
			</a-radio>
		</a-radio-group>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">单选组合 - 配合 name 使用</a-divider><!-- =============================================================== -->
	<p class="desc">可以为 Radio.Group 配置 name 参数，为组合内的 input 元素赋予相同的 name 属性，使浏览器把 Radio.Group 下的 Radio 真正看作是一组。</p>
	<p class="desc">例如可以通过方向键始终在同一组内更改选项。</p>
	<a-space>
		<a-radio-group v-model:value="value4_1" name="radioGroup">
			<a-radio value="1">A</a-radio>
			<a-radio value="2">B</a-radio>
			<a-radio value="3">C</a-radio>
			<a-radio value="4">D</a-radio>
		</a-radio-group>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">大小</a-divider><!-- =============================================================== -->
	<p class="desc">大中小三种组合，可以和表单输入框进行对应配合。</p>
	<a-space direction="vertical">
		<a-radio-group v-model:value="value5_1" size="large">
			<a-radio-button value="a">Hangzhou</a-radio-button>
			<a-radio-button value="b">Shanghai</a-radio-button>
			<a-radio-button value="c">Beijing</a-radio-button>
			<a-radio-button value="d">Chengdu</a-radio-button>
		</a-radio-group>
		<a-radio-group v-model:value="value5_2">
			<a-radio-button value="a">Hangzhou</a-radio-button>
			<a-radio-button value="b">Shanghai</a-radio-button>
			<a-radio-button value="c">Beijing</a-radio-button>
			<a-radio-button value="d">Chengdu</a-radio-button>
		</a-radio-group>
		<a-radio-group v-model:value="value5_3" size="small">
			<a-radio-button value="a">Hangzhou</a-radio-button>
			<a-radio-button value="b">Shanghai</a-radio-button>
			<a-radio-button value="c">Beijing</a-radio-button>
			<a-radio-button value="d">Chengdu</a-radio-button>
		</a-radio-group>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">不可用</a-divider><!-- =============================================================== -->
	<p class="desc">Radio 不可用。可以灵活控制某个选项不可用。</p>
	<a-space>
		<a-radio-group v-model:value="value6_1">
			<a-radio value="1" :disabled="disabled6_1">男</a-radio>
			<a-radio value="2" :disabled="disabled6_2">女</a-radio>
		</a-radio-group>
	</a-space>
	<a-space>
		<a-button type="primary" @click="toggleDisabled6_1">禁用男</a-button>
		<a-button type="primary" @click="toggleDisabled6_2">禁用女</a-button>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">填底的按钮样式</a-divider><!-- =============================================================== -->
	<p class="desc">实色填底的单选按钮样式。</p>
	<a-space direction="vertical">
		<a-radio-group v-model:value="value7_1" button-style="solid">
			<a-radio-button value="a">Hangzhou</a-radio-button>
			<a-radio-button value="b">Shanghai</a-radio-button>
			<a-radio-button value="c">Beijing</a-radio-button>
			<a-radio-button value="d">Chengdu</a-radio-button>
		</a-radio-group>
		<a-radio-group v-model:value="value7_2" button-style="solid">
			<a-radio-button value="a">Hangzhou</a-radio-button>
			<a-radio-button value="b" disabled>Shanghai</a-radio-button>
			<a-radio-button value="c">Beijing</a-radio-button>
			<a-radio-button value="d">Chengdu</a-radio-button>
		</a-radio-group>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">RadioGroup 组合 - 配置方式</a-divider><!-- =============================================================== -->
	<p class="desc">通过配置 options 参数来渲染单选框。</p>
	<a-space direction="vertical">
		<a-radio-group v-model:value="value8_1" :options="plainOptions8"></a-radio-group>
		<a-radio-group v-model:value="value8_2" :options="optionsWithDisabled8"></a-radio-group>
		<a-radio-group v-model:value="value8_3" :options="plainOptions8" disabled></a-radio-group>
		<a-radio-group v-model:value="value8_1" :options="plainOptions8" option-type="button"></a-radio-group>
		<a-radio-group v-model:value="value8_2" :options="optionsWithDisabled8" option-type="button"></a-radio-group>
		<a-radio-group v-model:value="value8_3" :options="plainOptions8" option-type="button" disabled></a-radio-group>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">单选组合</a-divider><!-- =============================================================== -->
	<p class="desc">一组互斥的 Radio 配合使用。</p>
	<a-space>
		<a-radio-group v-model:value="value9_1">
			<a-radio :value="1">A</a-radio>
			<a-radio :value="2">B</a-radio>
			<a-radio :value="3">C</a-radio>
			<a-radio :value="4">D</a-radio>
		</a-radio-group>
	</a-space>
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		value1_1: '1',
		
		value2_1: 'a',
		value2_2: 'a',
		value2_3: 'a',
		
		value3_1: 1,
		value3_2: '',
		radioStyle3: {
			display: 'flex',
			height: '30px',
			lineHeight: '30px',
		},
		
		value4_1: '1',
		
		value5_1: 'a',
		value5_2: 'a',
		value5_3: 'a',
		
		value6_1: '1',
		disabled6_1: false,
		disabled6_2: false,
		
		value7_1: 'a',
		value7_2: 'c',
		
		value8_1: 'Apple',
		value8_2: 'Apple',
		value8_3: 'Apple',
		plainOptions8: ['Apple', 'Pear2', 'Orange'],
		optionsWithDisabled8: [
			{ label: 'Apple', value: 'Apple' },
			{ label: 'Pear', value: 'Pear3' },
			{ label: 'Orange', value: 'Orange', disabled: true },
		],
		
		value9_1: 2,
	}
},
methods:{
	toggleDisabled6_1(){
		this.disabled6_1 = !this.disabled6_1;
	},
	toggleDisabled6_2(){
		this.disabled6_2 = !this.disabled6_2;
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
